<template>
  <div class="commodityList clear">
    <div class="title">
      <h2>猜你喜欢</h2>
    </div>
    <div class="listCom" v-for="item in list" :key="item.CommodityId">
      <img :src="item.SmallPic" class="commodityImg" />
      <p class="title">{{item.CommodityName}}</p>
      <div class="price">
        <span class="priceOne">¥{{item.SellPrice}}</span>
        <span class="priceTwo">¥{{item.OriginalPrice}}</span>
      </div>
    </div>
  </div>
</template>

<script>
import getapi from "@/api/ajax";
export default {
  data() {
    return {
      list: ""
    };
  },
  methods: {
    //ajax请求
    async getdata() {
      let body = { GuessRecommendType: 1 };
      let datas = await getapi.getdata(
        "commodityapi/Commodity/GetGuessRecommentCommodity",
        body
      );
      this.list = datas.data.Data.CommodityList;
    }
  },
  created() {
    this.getdata();
  }
};
</script>

<style lang="scss">
.commodityList {
  position: relative;
  width: 100%;
  background: #fff;
  padding: 0 0.64rem;
  box-sizing: border-box;
  .title {
    position: relative;
    height: 2.3rem;
    line-height: 2.3rem;
    font-size: 0.96rem;
    color: #000;
    text-align: center;
    h2 {
      position: relative;
      display: inline-block;
      padding: 0 0.36rem;
      font-size: 0.96rem;
      font-weight: normal;
      color: #333;
    }
    h2:before {
      content: "";
      display: block;
      width: 1.4rem;
      height: 0.18rem;
      position: absolute;
      top: 50%;
      margin-top: -0.08rem;
      background: url(//img05.yiguoimg.com/d/web/180508/01318/181423/decoration-left@3x.png)
        top left no-repeat;
      background-size: auto 100%;
      left: -1.25rem;
    }
    h2:after {
      content: "";
      display: block;
      width: 1.4rem;
      height: 0.18rem;
      position: absolute;
      top: 50%;
      margin-top: -0.08rem;
      background: url(//img05.yiguoimg.com/d/web/180508/01318/181423/decoration-left@3x.png)
        top left no-repeat;
      background-size: auto 100%;
      right: -1.25rem;
    }
  }
  .listCom {
    float: left;
    width: 50%;
    padding: 0 0.8rem;
    box-sizing: border-box;
    .commodityImg {
      width: 9.92rem;
      height: 9.92rem;
      margin-bottom: 0.6rem;
      margin: auto;
    }
    .title {
      width: 9.92rem;
      height: 2rem;
      line-height: 1rem;
      font-size: 0.84rem;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
    }
    .price {
      width: 5, 92rem;
      height: 2rem;
      padding: 0.2rem 0;
      box-sizing: border-box;
      .priceOne {
        font-size: 0.84rem;
        color: #ff6353;
        line-height: 1.6rem;
      }
      .priceTwo {
        font-size: 0.68rem;
        color: #ccc;
        text-decoration: line-through;
        padding-left: 0.6rem;
        line-height: 1.6rem;
      }
    }
  }
}
.clear:after {
  content: " ";
  display: block;
  height: 0;
  clear: both;
}
</style>